<template>
    <div>
        <div class="chooseImg">
            <van-input type="file" accept="image/*" class="chooseItem" />
            <van-button class="chooseItem" :style="showBtn" @click="chooseImgFuc" width="100%">请选择图片</van-button>
            <img class="chooseItem" width="100%" :style="showImg" @click="chooseImgFuc" :src="imgSrc" />
        </div>
        <div class="footBtn">
            <van-button safe-area-inset-bottom @click="uploadImg" type="info" size="large" style="margin-top:5vh;">上传</van-button>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'
import * as dd from 'dingtalk-jsapi'
import wx from 'weixin-js-sdk'
import { Toast, Uploader } from 'vant'
Vue.use(Uploader)
export default {
    name: 'billuploadold',
    data () {
        return {
            imgSrc: '',
            showBtn: { display: 'block' },
            showImg: { display: 'none' },
            logintype: 'wechat'
        }
    },
    methods: {
        chooseImgFuc () {
            let userAgent = window.navigator.userAgent.toLowerCase()
            if (userAgent.indexOf('micromessenger') !== -1) {
                // alert("in wechat")
                this.chooseImgWx()
            } else if (userAgent.indexOf('dingtalk') !== -1) {
                // alert("in dingding")
                this.chooseImgDing()
            } else {
                alert('请在微信或钉钉端使用此功能')
            }
        },
        chooseImgWx () {
            let that = this
            wx.ready(function () {
                // alert('begin wx')
                wx.chooseImage({
                    count: 1,
                    fail: function (err) {
                        // //console.log(res)
                        alert('上传失败，请重新选择图片(wx)' + JSON.stringify(err))
                    },
                    success: function (res) {
                        alert(JSON.stringify(res))
                        that.changeShow(res.localIds[0])
                    }
                })
            })
        },
        chooseImgDing () {
            let that = this
            // alert('begin ding')
            dd.ready(function () {
                dd.biz.util.uploadImage({
                    onFail: function (err) {
                        // //console.log(res)
                        alert('上传失败，请重新选择图片(ding)' + JSON.stringify(err))
                    },
                    onSuccess: function (res) {
                        alert('dingupload' + JSON.stringify(res))
                        that.changeShow(res.filePaths[0])
                    }
                })
            })
        },
        changeShow (imgUrl) {
            this.showBtn = { display: 'none' }
            this.showImg = { display: 'block' }
            this.imgSrc = imgUrl
        },
        uploadImg () {
            alert('in upload')
            let that = this
            if (this.imgSrc.length === 0) {
                alert('请选择图片')
            } else {
                if (this.logintype === 'wechat' || this.logintype === 'wxwork') {
                    wx.uploadImage({
                        localId: this.imgSrc,
                        success: function (res) {
                            alert('wxsuccess ' + JSON.stringify(res))
                            that.axios({
                                method: 'post',
                                url: '/api/fpinfor1.wxscansaveforimg.do',
                                data: qs.stringify({
                                    'imgId': res.serverId,
                                    'logintype': that.logintype
                                })
                            }).then(res1 => {
                                alert(JSON.stringify(res1))
                                if (res1.data.msg === 'success') {
                                    Toast('上传成功')
                                } else {
                                    alert('上传失败')
                                }
                            }).catch(res1 => {
                                alert('上传失败' + JSON.stringify(res1))
                            })
                        },
                        fail: function (err) {
                            alert('上传失败（wx）' + JSON.stringify(err))
                        }
                    })
                } else if (this.logintype === 'dingding') {

                } else {
                    alert('请在钉钉或微信使用该功能')
                }
            }
        }
    },
    created: function () {
        let ua = window.navigator.userAgent.toLowerCase()
        // alert(ua)
        // //console.log(ua)
        let logintype = this.logintype
        let tourl = window.location.href
        let clttype = 'android'

        if (ua.indexOf('wxwork') !== -1) {
            logintype = 'wxwork'
        } else if (ua.indexOf('dingtalk') !== -1) {
            logintype = 'dingding'
        } else if (ua.indexOf('micromessenger') !== -1) {
            logintype = 'wechat'
        } else {
            logintype = 'browser'
        }
        this.logintype = logintype
        if (logintype === 'browser') {
            alert('请在钉钉或微信端登录!')
            this.$router.go(-1)
        }
        if (ua.indexOf('iphone') !== -1) {
            clttype = 'ios'
        }
        let data = {
            url: tourl,
            type: logintype,
            clttype: clttype
        }
        let url = '/api/default.getlocation.do'
        // alert("begin axios")
        // alert(this.idobject)
        this.axios({
            method: 'post',
            url: url,
            data: qs.stringify(data)
        }).then(res => {
            if (res.data.flag === '1' && res.data.des && res.data.des.indexOf('登录过期') >= 0) {
                Toast(res.data.des)
                this.loginout()
            } else {
                // alert("success axios" + JSON.stringify(res))
                let data = res.data
                if (logintype === 'wechat' || logintype === 'wxwork') {
                    // alert('config wx')
                    wx.config({
                        beta: true,
                        debug: false,
                        appId: data.appId,
                        timestamp: data.timestamp,
                        nonceStr: data.nonceStr,
                        signature: data.signature,
                        jsApiList: [
                            'chooseImage',
                            'previewImage',
                            'uploadImage',
                            'downloadImage',
                            'previewFile',
                            'getLocation'
                        ]
                    })
                    wx.error(function (err) {
                        alert('上传失败，请重新选择图片(wxerr)' + JSON.stringify(err))
                    })
                } else if (logintype === 'dingding') {
                    // alert("config dd")
                    dd.config({
                        agentId: data.agentid,
                        corpId: data.appId,
                        timeStamp: data.timestamp,
                        nonceStr: data.nonceStr,
                        signature: data.signature,
                        type: 0,
                        jsApiList: [
                            'biz.util.uploadImage',
                            'biz.util.chooseImage',
                            'runtime.info',
                            'biz.contact.choose',
                            'device.notification.confirm',
                            'device.notification.alert',
                            'device.notification.prompt',
                            'biz.ding.post',
                            'biz.util.openLink',
                            'device.geolocation.get'
                        ]
                    })
                    dd.error(function (error) {
                        alert('dd error: ' + JSON.stringify(error))
                    })
                }
            }
        }).catch(function (error) {
            alert(error)
        })
    }
}
</script>

<style>
.footBtn {
    position: fixed;
    bottom: 0;
    line-height: var(--footer-height);
    width: 100%;
}

.chooseImg {
    width: 100%;
}

.chooseItem {
    margin: auto;
}

button.chooseItem {
    margin-top: 20vh;
}
</style>
